import { FC } from "react";
import { observer, inject } from "mobx-react";
import { Layout, Result, Button } from "antd";
import StepTop from "./StepTop";
import Reactordrawer from "./Reactordrawer";
import { ITStore } from "../../store";
interface TProp {
  store: ITStore;
}

const { Content } = Layout;

const DesignerFinished: FC<TProp | any> = ({ store }: TProp): JSX.Element => {
  const {
    languageStore: { lang },
    designerStore: { changeShowDesingerDetail, currentDesigner },
  } = store;

  return (
    <Content className="mainLayout">
      {/* 步骤 */}
      <StepTop currentStep={4} />

      <Result
        status="success"
        title={lang["langexpcomplete"]}
        subTitle=""
        extra={[
          <Button
            type="primary"
            key="view"
            onClick={() => {
              changeShowDesingerDetail(true);
            }}
          >
            {lang["langviewexpdata"]}
          </Button>,
        ]}
      />
      <Reactordrawer designerId={currentDesigner?.id} />
    </Content>
  );
};

export default inject("store")(observer(DesignerFinished));
